
<template>
  <div class="h-full flex flex-col bg-wechat-bg">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center justify-between px-4">
      <h1 class="text-lg font-semibold">通讯录</h1>
      <button class="text-white">
        <i class="fas fa-plus text-lg"></i>
      </button>
    </div>

    <!-- 功能入口 -->
    <div class="bg-white mb-2">
      <div class="flex items-center p-4 border-b border-gray-100">
        <i class="fas fa-user-plus text-wechat-green text-xl"></i>
        <span class="ml-3 text-gray-900">新的朋友</span>
      </div>
      <div class="flex items-center p-4 border-b border-gray-100">
        <i class="fas fa-users text-wechat-green text-xl"></i>
        <span class="ml-3 text-gray-900">群聊</span>
      </div>
      <div class="flex items-center p-4 border-b border-gray-100">
        <i class="fas fa-tags text-wechat-green text-xl"></i>
        <span class="ml-3 text-gray-900">标签</span>
      </div>
      <div class="flex items-center p-4">
        <i class="fas fa-rss text-wechat-green text-xl"></i>
        <span class="ml-3 text-gray-900">公众号</span>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="bg-white px-4 py-2">
      <div class="relative">
        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索"
          class="w-full pl-10 pr-4 py-2 bg-gray-100 rounded-lg focus:outline-none"
        />
      </div>
    </div>

    <!-- 星标联系人 -->
    <div v-if="starredContacts.length > 0" class="bg-white mb-2">
      <div class="flex items-center p-4 border-b border-gray-100">
        <i class="fas fa-star text-yellow-500 text-xl"></i>
        <span class="ml-3 text-gray-900">星标朋友</span>
      </div>
      <div v-for="contact in starredContacts" :key="contact.id">
        <ContactItem :contact="contact" @click="openContactDetail(contact)" />
      </div>
    </div>

    <!-- 联系人列表 -->
    <div class="flex-1 overflow-y-auto bg-white">
      <div v-for="(contacts, initial) in groupedContacts" :key="initial">
        <div class="bg-gray-100 px-4 py-1 text-sm text-gray-600">
          {{ initial }}
        </div>
        <div v-for="contact in contacts" :key="contact.id">
          <ContactItem :contact="contact" @click="openContactDetail(contact)" />
        </div>
      </div>
    </div>

    <!-- 字母索引 -->
    <div class="fixed right-2 top-1/2 transform -translate-y-1/2">
      <div class="flex flex-col items-center text-xs text-gray-500">
        <div v-for="letter in alphabet" :key="letter" 
             class="py-1 cursor-pointer hover:text-wechat-green"
             @click="scrollToLetter(letter)">
          {{ letter }}
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useContactStore } from '@/stores'
import TabBar from '@/components/common/TabBar.vue'
import ContactItem from '@/components/contacts/ContactItem.vue'

const router = useRouter()
const contactStore = useContactStore()

const searchQuery = computed({
  get: () => contactStore.searchQuery,
  set: (value) => contactStore.setSearchQuery(value)
})

const starredContacts = computed(() => contactStore.starredContacts)
const groupedContacts = computed(() => contactStore.groupedContacts)

const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('')

const openContactDetail = (contact: any) => {
  router.push(`/contact-detail/${contact.id}`)
}

const scrollToLetter = (letter: string) => {
  // 实现字母索引滚动
  console.log('Scroll to', letter)
}
</script>
